<template>
  <div class="goods-container">
    <!-- 两栏自适应布局 -->
    <div class="goods-box">
      <router-link class="goods" v-for="item in goods" :key="item.ID" :to="'/goodsInfo/'+item.GoodsId">
        <div class="img">
          <img v-lazy="item.ImgUrl">
          <div class="quan">
            <p>
              <span class="yhq">券￥{{ item.ActMoney }}</span>
            </p>
          </div>
        </div>
        <div class="info">
          <p class="title">{{ item.GoodsName }}</p>
          <P class="price">
            <span class="sell_price">
              ￥{{ item.LastPrice }}
              <sub>券后价</sub>
            </span>
            <span>销量：{{ item.SaleCount }}</span>
          </P>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
// 引入Toast
import { Toast } from "mint-ui";

export default {
  data: function() {
    return {
      goods: []
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      this.$http
        .get("http://api.xuandan.com/DataApi/Top100?AppKey=4y0juvewel&type=3")
        .then(result => {
          if (result.body.msg == "ok") {
            console.log(result);
            this.goods = result.body.data;
          } else {
            Toast("获取数据失败");
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.goods-container {
  z-index: -1;
  .goods-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5px;
    margin-top: 5px;
    .goods {
      min-height: 200px;
      width: 49%;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      .img {
        // width: 100%;
        position: relative;
        img {
          width: 100%;
          min-height: 176px;
          background-color: #fff;
        }
        image[lazy="loading"] {
          width: 40px;
          height: 300px;
          margin: auto;
        }
        .quan {
          position: absolute;
          right: 0;
          bottom: 0;
          margin: 0;
          .yhq {
            min-width: 40px;
            height: 15px;
            background-color: red;
            color: #fff;
            padding: 5px;
          }
        }
      }
      .info {
        .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          font-size: 11px;
          .sell_price {
            font-size: 12px;
            color: red;
            font-weight: 600;
            sub {
              color: #dedede;
              font-size: 11px;
            }
          }
        }
      }
    }
  }
}
</style>
